<template>
  <div class="chain">
    <thlrChain />
    <treeChain v-if="false" />
    <around-chain :before="before" :current="current" :after="after" v-if="false"/>
    <loop-chain @getTheChainItem="getTheChainItem" :res="chainRes" v-if="false"/>
    <el-dialog
      :title="chainTitle"
      :visible.sync="chainVisible"
      width="650px"
      :before-close="handleChainClose">
      <div class="dialog-chain-main">
        <ag-grid-vue 
          class="table ag-theme-balham" 
          :columnDefs="columnDefs" 
          :rowData="rowData">
        </ag-grid-vue>
      </div>
      <div class="dialog-chain-footer">
        <el-button @click="dialogVisible = false">Done</el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import loopChain from '@/components/loopChain/loopChain.vue'
import aroundChain from './aroundChain/aroundChain.vue'
import treeChain from './treeChain/oneChain.vue'
import thlrChain from './threelrChain/thlrChain.vue'
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { 
    loopChain, aroundChain, treeChain, thlrChain, 
    'ag-grid-vue': AgGridVue 
  },
  data () {
    return {
      before: [
        {
          id: 1, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        // {
        //   id: 2, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
        // {
        //   id: 2, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
      ],
      current: [
        {
          id: 3, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
      ],
      after: [
        {
          id: 4, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 5, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 6, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        // {
        //   id: 7, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
        // {
        //   id: 8, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // }
      ],
      chainRes: [
          {
            id: 1, name: 'lead', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 2, name: 'Oppt', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 3, name: 'Deal', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 4, name: 'Contract', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 1, name: 'SC', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 2, name: 'xxx', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 1, name: 'SC', children: [
              {key: 'ID', value: '0923489284'}
            ]
          },
          {
            id: 2, name: 'xxx', children: [
              {key: 'ID', value: '0923489284'}
            ]
          }
      ],
      chainVisible: false,
      chainTitle: '',
      columnDefs: [
				{headerName: '姓名', field: 'key', sortable: true, filter: true },
        {headerName: '性别', field: 'value', sortable: true, filter: true },
        // {headerName: '年龄', field: 'age', sortable: true  }
			],
			rowData: [
        {key: 'ssh', value: 'dsadsada'},
        {key: 'ssh', value: 'dsadsada'},
        {key: 'ssh', value: 'dsadsada'}
			],
    }
  },
  methods: {
    getTheChainItem(params1) {
      console.log(params1)
      this.chainVisible = true
    },
    handleChainClose() {
      this.chainTitle = ''
      this.chainVisible = false
    }
  }
}
</script>
 
<style scoped lang="scss">
  .dialog-chain-main{
    height: 194px;
    .table {
      width: 100%;
      height: 194px;
    }
  }
  .dialog-chain-footer{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }
</style>